.main {
  padding: 20px;

  .tools-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;

      .openModalBtn {
          background-color: #4caf50;
          color: #fff;
          padding: 10px 20px;
          font-size: 16px;
          border-radius: 4px;

          &:hover {
              background-color: #45a049;
          }
      }

      div {
          display: flex;
          align-items: center;

          .keyword {
              padding: 8px;
              font-size: 16px;
              border: 1px solid #ccc;
              border-radius: 4px;
              margin-right: 10px;
          }

          .searchBtn {
              background-color: #2196f3;
              color: #fff;
              padding: 8px 16px;
              font-size: 16px;
              border-radius: 4px;

              &:hover {
                  background-color: #1976d2;
              }
          }
      }
  }

  .studentTable {
      width: 100%;
      border-collapse: collapse;
      background-color: #fff;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

      th,
      td {
          padding: 12px;
          border: 1px solid #ddd;
          text-align: left;
          color: #171616;
      }

      th {
          background-color: #f2f2f2;
      }

      tr:hover {
          background-color: #f9f9f9;
      }

      button {
          padding: 6px 12px;
          font-size: 14px;
          border-radius: 4px;
          margin-right: 5px;

          &.editBtn {
              background-color: #ff9800;
              color: #fff;

              &:hover {
                  background-color: #e68900;
              }
          }

          &.deleteBtn {
              background-color: #f44336;
              color: #fff;

              &:hover {
                  background-color: #d32f2f;
              }
          }
      }
  }

  .modal {
      // display: none;
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0, 0, 0, 0.4);
      color: #171817;

      .modal-content {
          background-color: #fff;
          margin: 5% auto;
          padding: 20px;
          border-radius: 4px;
          width: 400px;

          .modalTitle {
              margin-bottom: 20px;
              font-size: 20px;
              text-align: center;
          }

          label {
              display: block;
              margin-bottom: 5px;
              font-weight: bold;
          }

          input,
          select {
              width: 100%;
              padding: 8px;
              margin-bottom: 15px;
              border: 1px solid #ccc;
              border-radius: 4px;
              box-sizing: border-box;
          }

          .saveStudentBtn {
              background-color: #4caf50;
              color: #fff;
              padding: 10px;
              font-size: 16px;
              border-radius: 4px;
              width: 100%;

              &:hover {
                  background-color: #45a049;
              }
          }
      }
  }
}